@import '{}/imports/ui/stylesheets/utils.less';

.list-todos {
  a {
    box-shadow: rgba(255,255,255,.15) 0 1px 0 0;
    display: block;
    line-height: 1.5em;
    padding: .75em 2.5em;
    position: relative;
  }

  .count-list {
    transition: all 200ms ease-in;
    background: rgba(255,255,255,.1);
    border-radius: 1em;
    float: right;
    font-size: .7rem;
    line-height: 1;
    margin-top: .25rem;
    margin-right: -1.5em;
    padding: .3em .5em;
  }

  [class^="icon-"],
  [class*=" icon-"] {
    .font-s2;
    float: left;
    margin-left: -1.5rem;
    margin-right: .5rem;
    margin-top: .1rem;
    width: 1em;
  }

  .icon-lock {
    .font-s1;
    margin-top: .2rem;
    opacity: .8;
  }

  .list-todo {
    color: rgba(255,255,255,.4);

    &:hover,
    &:active,
    &.active {
      color: @color-empty;
      .count-list { background: @color-primary; }
    }

    .cordova &:hover {
      // Prevent hover states from being noticeable on Cordova apps
      color: rgba(255,255,255,.4);
    }
  }
}
